@charset "utf-8";
@import-once "layout";

/**************** UI COMMON STYLES ***************/
@border-color: #cdced3;

.ui-widget-content{
    background: none;
    background-image: none;
    border: 1px solid #7a7a7a;
}

.ui-slider{
    height: 9px;
    .border-radius(0px);

    .ui-widget-header{
        top: -1px;
        left: -1px;
        background-color: #4f95dc;
        background-image: none;
        border: 1px solid #4f95dc;
    }

    .ui-slider-handle{
        border: 1px solid #7a7a7a;
        width: 12px;
        height: 13px;
        top: -3px;

        background: url(../img/sprite-icons.png) -66px -1px #fff;
        .border-radius(0);
    }
}

.ui-slider-vertical{
    width: 8px;
    border: 1px solid #7a7a7a;

    .ui-widget-header{
        top: auto;
        left: -1px;
        bottom: -1px;
    }

    .ui-slider-handle{
        top: auto;
        left: -3px;
    }
}

/* Progress Bars styles
*****************************************/
div.progress{
    border: 1px solid #7a7a7a;
    margin: 0px;
    height: 15px;
    .border-radius(0);
    #gradient > .vertical(#f0f3fa, #fefeff);

    div.bar{
        border-right: 1px solid #7a7a7a;

        &.blue{
            #gradient > .vertical(#559fe3, #2e62b9);
        }

        &.light{
            #gradient > .vertical(#eef2f9, #dfe3e9);
        }

        &.green{
            #gradient > .vertical(#89c23d, #72a52d);
        }

        &.red{
            #gradient > .vertical(#df1920, #bd1015);
        }

        &.purple{
            #gradient > .vertical(#a15aa2, #842c82);
        }
    }
}

div.animated-bar{
    div.title, div.values{
        text-align: right;
        font-size: 12px;
    }
    div.title{
        padding-bottom: 10px;
    }
    div.values{
        padding-top: 10px;
    }
}

/* Nav-tabs
*****************************************/
div.tabbable{
    margin: 0;

    ul.nav{
        margin: 0;
        #gradient > .vertical(#f8fafd, #eff1f4);

        li{
            border: none !important;
            &.active{
                a:hover{
                    background-color: #fff;
                }
            }

            a{
                color: #7a7a7a;
                margin: 0;
                border-color: @border-color;
                border-top: none;
                border-left: none;
                border-bottom: none;
                outline: 0 none;
                .border-radius(0);

                &:hover{
                    background-color: transparent;
                    border-left: none;
                    border-top: none;
                    border-bottom: none;
                }
            }
        }
    }

    div.tab-content{
        padding: 15px 20px;

        div.tab-pane{
            p{
                margin: 0;
            }
        }
    }
}

/* Paginations
*****************************************/
div.pagination{
    height: auto;
    margin: 10px;

    ul{
        margin: 0px;
        padding: 0px;
        padding-top: 5px;
        .box-shadow-none();
        .border-radius(0);

        li{
            display: inline-block;

            &.active{
                a{
                    filter: none;
                    background: #fff !important;
                }
            }
            &:first-child{
                a{
                    .border-radius(0);
                }
            }
            &:last-child{
                a{
                    .border-radius(0);
                }
            }

            a{
                .button;
            }
        }
    }
}

/* Buttons
*****************************************/
/*button, input[type="button"], input[type="submit"], input[type="reset"]*/
.button{
    border: 1px solid @border-color;
    font-size: 12px;
    line-height: 20px;
    padding: 4px 11px;
    color: #838383;
    .border-radius(0);
    #gradient > .vertical(#f2f5fb, #dee2e8);
}

/* Accordion
*****************************************/
.accordion{
    margin: 0;
}

/* Buttons
*****************************************/
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn{
    &.blue{
        border: 1px solid #2d60b7;
        color: #fff;
        #gradient > .vertical(#4b8fd8, #2d60b7);

        &:hover{
            #gradient > .vertical(#2d60b7, #4b8fd8);
        }
    }

    &.red{
        border: 1px solid #880203;
        color: #fff;
        #gradient > .vertical(#c11218, #880203);

        &:hover{
            #gradient > .vertical(#880203, #c11218);
        }
    }

    &.orange{
        border: 1px solid #b13e07;
        color: #fff;
        #gradient > .vertical(#ea601f, #b13e07);

        &:hover{
            #gradient > .vertical(#b13e07, #ea601f);
        }
    }

    &.green{
        border: 1px solid #659525;
        color: #fff;
        #gradient > .vertical(#8bc43e, #659525);

        &:hover{
            #gradient > .vertical(#659525, #8bc43e);
        }
    }

    &.black{
        border: 1px solid #000;
        color: #fff;
        #gradient > .vertical(#2c2c2c, #000);

        &:hover{
            #gradient > .vertical(#000, #2c2c2c);
        }
    }

    &.purple{
        border: 1px solid #842c83;
        color: #fff;
        #gradient > .vertical(#9f569f, #842c83);

        &:hover{
            #gradient > .vertical(#842c83, #9f569f);
        }
    }

    &.white{
        background: #fff;
    }
}

/* Dialogs windows styles
******************************************************************************/
div.modal-backdrop{
    .opacity(30);

    &.fade.in{
        .opacity(30);
    }
}

div.modal{
    border: 1px solid #6c6c6c;
    width: 450px;
    left: 32%;
    margin: 0;
    margin-top: -200px;
    .box-shadow(0px, 0px, 30px, #222);
    .border-radius(0px);

    div.modal-header{
        border-top: 1px solid #fff;
        border-bottom: 1px solid @border-color;
        .border-radius(0);
        #gradient > .vertical(#f8fafd, #eff1f4);

        h3{
            font-size: 18px;
        }

        button.close{
            .opacity(80);

            &:hover{
                .opacity(100);
            }
        }
    }

    div.modal-footer{
        border-top: 1px solid @border-color;
        .border-radius(0);
        #gradient > .vertical(#eff1f4, #f8fafd);
    }
}

/* Custmo styles
*****************************************/
table{
    margin: 0px !important;
    .box-sizing-border-box();

    tr{
        td{
            border: 1px solid @border-color;
            padding: 20px 15px !important;
            .border-radius(0);

            &:first-child{
                border-left: none;
                width: 140px;
            }
            &:last-child{
                border-right: none;
            }
        }

        &:first-child{
            td{border-top: none;}
        }
        &:last-child{
            td{
                border-bottom: none;
            }
        }
    }
}

#table-sliders{
    tbody{
        tr{
            td:last-child{
                padding-top: 25px !important;
            }
        }
    }

    #slider-range-numbers-values{
        position: relative;

        & > div{
            display: block;
            position: absolute;
            font-size: 12px;
        }

        div.min{left: 0;}
        div.max{right: 0;}
    }

    #eq span {
        height:120px; float:left; margin:15px
    }
}

#table-progress-bar{
    tbody{
        tr{
            td:last-child{padding-top: 22px !important;}
        }
    }
}

#example-tooltips{
    div.body{
        padding: 15px 15px;

        div.row-fluid{
            margin-bottom: 10px;
        }

        div.row-fluid:last-child{
            margin-bottom: 0px;
        }

        div.tooltip-place{
            border: 1px solid @border-color;
            text-align: center;
            padding: 7px 3px;
        }
    }
}

#dialogs-notifications{
    div.body{
        padding: 15px 20px;
    }
}

#example-pagination{
    div.body{
        padding: 5px 10px;
    }
}

#example-collapse{
    div.accordion-inner{
        padding: 15px 20px;
    }

    div.accordion-heading{
        a.accordion-toggle{
            span.caret{
                display: inline-block;
                margin-right: 5px;
            }
            &:hover{
                span.caret{
                    display: inline-block !important;
                }
            }
        }
    }
    div.accordion-group:last-child{
        border-bottom: none;
    }
}

#example-buttons{
    div.body{
        padding: 15px 20px;
    }

    div.btn-group{
        button.btn:hover{
            border: 1px solid #2d60b7;
            color: #fff;
            .border-radius(0);
            #gradient > .vertical(#4b8fd8, #2d60b7);
        }

        button.btn:first-child{
            .border-radius(0px);
            font-size: 12px;

            &:hover{
                color: #fff;
            }
        }
        button.dropdown-toggle{
            .border-radius(0px);
        }

        button.btn.pull-right + button.dropdown-toggle{
            margin-left: 3px;
        }
    }
}

#example-dialogs-notifications{
    div.body{padding: 15px 20px;}
}

#dialog-modal{
    div.modal-footer{
        button{width: 80px;}
    }
}

#dialog-form-elements{
    div.modal-footer{
        button{width: 80px;}
    }
    div.modal-body{
        form.form-horizontal{
            margin: 0px;
        }

        div.control-group{
            border-bottom: 1px solid @border-color;
            margin: 0px !important;

            div.form-label{
                padding: 12px;
            }
            div.form-element{
                border-left: 1px solid @border-color;
                padding: 12px;

                & >*{
                    width: 100%;
                    .border-radius(0px);
                }
                & > select{
                    width: 105%;
                    &:focus{
                        border-color: rgba(82, 168, 236, 0.8);
                        outline: 0px;
                        @transition: 0.2s, linear;
                        .transition(@transition);
                    }
                }
            }
        }
    }
}

#example-pager{
    div.body{padding: 15px 20px;}
    div.container-pager{
        position: relative;
        height: 75px;
        & > button{
            position: absolute;
            width: 90px;
        }

        .top-left{top: 0px; left: 0px;}
        .top-right{top: 0px; right: 0px;}
        .bottom-left{bottom: 0px; left: 0px;}
        .bottom-right{bottom: 0px; right: 0px;}
    }
}

/* the following icons are located in 'img/sprite-icons.png' */
i.panel-icon-user-green{background-position: 0px -96px;}
i.panel-icon-page-white{background-position: -16px -96px;}
i.panel-icon-dollar{background-position: -32px -96px;}

div#dialog-setting{
    div.modal-header{
        border-bottom: 1px solid @border-color;
    }
    div.modal-body{
        padding: 0px;
    }
    div.modal-footer{
        button{
            width: 80px;
        }
    }
    div.settings-tabs{
        border-top: 1px solid #fff;
        border-bottom: 1px solid @border-color;
        #gradient > .vertical(#f8fafd, #eff1f4);

        ul{
            display: block;
            width: 300px;
            margin: 0px auto;
            margin-top: -1px;
            border-bottom: none;

            li{
                display: inline-block;
                margin-right: -1px;
                padding: 10px 0px;
                width: 33%;
                border-left: 1px solid @border-color !important;
                border-right: 1px solid @border-color !important;

                &.active a{
                    background-color: transparent;
                }
                a{
                    border: none;
                    padding: 0px;
                    display: block;
                }

                div i{
                    width: 16px;
                    margin: 0px auto;
                    display: block;
                }
                div.setting-label{
                    text-align: center;
                }
            }
        }
    }
    div.control-group{
        label.control-label{
            width: 150px;
        }
        div.controls{
            margin-left: 160px;
            & > *{
                .border-radius(0px);
            }
        }
    }
}

form{
    .field{
        border: 1px solid red;

        input[type="text"],
        select,
        textarea{
            width: 100%;
            .box-sizing-border-box();
        }

        input[type="text"],
        select{
            height: 30px;
        }
    }
}

/*****************************************************************************/
/* Large desktop */
@media (min-width: 1200px) {}

@media (min-width: 1024px){}

@media (min-width: 980px){}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {}

/* Landscape phones and down */
@media (max-width: 480px) {}

@media (max-width: 320px) {}